import React, { Component, useState } from "react";
import { CSSTransition } from "react-transition-group";
import "animate.css"
import { func } from "prop-types";
// 类组件
// export default class Tow extends Component {
//     constructor(props) {
//         super(props)
//         this.goAnm = this.goAnm.bind(this)
//     }
//     state = {
//         flag: false
//     }
//     goAnm() {
//         this.setState({
//             flag: !this.state.flag
//         })
//     }
//     render() {
//         console.log(this.state.flag)
//         return (
//             <div>
//                 <button onClick={this.goAnm}>点击出动画效果</button>
//                 <CSSTransition
//                     in={this.state.flag}
//                     timeout={2000}
//                     unmountOnExit  // 退出去DOM移除
//                     classNames={{
//                         enter: "animate__animated",
//                         enterActive: "animate__zoomInDown",
//                         exit: "animate__animated",
//                         exitActive: 'animate__zoomOutDown',
//                     }}
//                 >
//                     <div style={{
//                         width: "100px",
//                         height: "100px",
//                         backgroundColor: "red",
//                         textAlign: "center",
//                         lineHeight: "100px",
//                         marginLeft: "200px",
//                         marginTop: "100px",
//                     }}>类组件动画效果</div>
//                 </CSSTransition>
//             </div>
//         )
//     }
// }

// 函数组件
export default function Tow() {
    let [flag, setFlag] = useState(false)
    function goAnm() {
        setFlag(!flag)
    }
    console.log(flag)
    return (
        <div >
            <button onClick={goAnm}>点击出动画效果</button>
            <CSSTransition
                timeout={1000}
                in={flag}
                unmountOnExit  // 退出去DOM移除
                classNames={{
                    enter: "animate__animated",
                    enterActive: "animate__backInDown",
                    exit: "animate__animated",
                    exitActive: 'animate__backOutDown'
                }}
            >
                <div
                    style={{
                        width: "100px",
                        height: "100px",
                        backgroundColor: "green"
                    }}
                >
                    函数组件动画效果
                </div>
            </CSSTransition>

        </div >
    )
}
